<template>
  <view class="swiper-container">
    <u-sticky :bgColor="tabBgColor">
      <u-tabs :list="containerList" lineWidth="80"
              :activeStyle="activeStyle"
              :lineColor="lineColor"
              :inactiveStyle="inactiveStyle"

              :current="currentIndex" @click="onTabsChange"></u-tabs>
    </u-sticky>
    <swiper
        class="full-screen-swiper"
        :current="currentIndex"
        @change="onSwiperChange"
    >
      <swiper-item>
        <dev-index/>
      </swiper-item>

      <swiper-item>
        <ten-index/>
      </swiper-item>

      <swiper-item>
        <dev-index/>
      </swiper-item>
    </swiper>
  </view>
  <tab-bar :current="2"/>
</template>

<script>
import TabBar from "../../components/tabBar/tabBar.vue";
import DevIndex from "@/pages/report/devInfo/dev-index.vue";
import TenIndex from "@/pages/report/tenace/ten-index.vue";

export default {
  components: {
    TenIndex,
    DevIndex,
    TabBar,
  },

  onLoad() {

  },
  data() {
    return {
      tabBgColor:'#dfdfdf',
      activeStyle: {
        color: '#000000'
      },
      inactiveStyle: {
        color: '#7a7a7a'
      },
      lineColor:'#165dff',
      currentIndex: 0,
      containerList: [
        {id: 1, name: '设备综合看板'},
        {id: 2, name: '保养综合看板'},
        {id: 3, name: '故障综合看板'}
      ]
    }
  },
  methods: {
    onSwiperChange(e) {
      this.currentIndex = e.detail.current
    },

    onTabsChange({index}) {
      this.currentIndex = index
    }
  }
}
</script>

<style lang="scss" scoped>
.swiper-container {
  height: 100vh;
  background-color: #dfdfdf;
  position: relative;

  .full-screen-swiper {
    height: 100%;

    .slide-page {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #f7f7f7;

      .page-number {
        font-size: 80rpx;
        color: #000000;
      }
    }
  }
}

</style>